<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Filter</span></h1>
        <p>Filtering feature provides advanced and flexible options to query the data. Tip: Visit the <a [routerLink]="['/filterservice']">FilterService</a> for a custom filtering example.</p>
    </div>
    <app-demoActions github="table" stackblitz="tablefilter-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Filter Menu</h5>
        <p>Filters are displayed in an overlay.</p>
        <p-table #dt1 [value]="customers" dataKey="id"
            [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading" styleClass="p-datatable-gridlines"
            [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
            [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
            <ng-template pTemplate="caption">
                <div class="flex">
                    <button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
                    <span class="p-input-icon-left ml-auto">
                        <i class="pi pi-search"></i>
                        <input pInputText type="text" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
                    </span>
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th>
                        <div class="flex justify-content-center align-items-center">
                            Name
                            <p-columnFilter type="text" field="name" display="menu"></p-columnFilter>
                        </div>
                    </th>
                    <th>
                        <div class="flex justify-content-center align-items-center">
                            Country
                            <p-columnFilter type="text" field="country.name" display="menu"></p-columnFilter>
                        </div>
                    </th>
                    <th>
                        <div class="flex justify-content-center align-items-center">
                            Agent
                            <p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
                                <ng-template pTemplate="header">
                                    <div class="px-3 pt-3 pb-0">
                                        <span class="font-bold">Agent Picker</span>
                                    </div>
                                </ng-template>
                                <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                                    <p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
                                        <ng-template let-option pTemplate="item">
                                            <div class="p-multiselect-representative-option">
                                                <img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
                                                <span class="ml-1">{{option.name}}</span>
                                            </div>
                                        </ng-template>
                                    </p-multiSelect>
                                </ng-template>
                            </p-columnFilter>
                        </div>
                    </th>
                    <th>
                        <div class="flex justify-content-center align-items-center">
                            Date
                            <p-columnFilter type="date" field="date" display="menu"></p-columnFilter>
                        </div>
                    </th>
                    <th>
                        <div class="flex justify-content-center align-items-center">
                            Balance
                            <p-columnFilter type="numeric" field="balance" display="menu" currency="USD"></p-columnFilter>
                        </div>
                    </th>
                    <th>
                        <div class="flex justify-content-center align-items-center">
                            Status
                            <p-columnFilter field="status" matchMode="equals" display="menu">
                                <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                                    <p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any">
                                        <ng-template let-option pTemplate="item">
                                            <span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
                                        </ng-template>
                                    </p-dropdown>
                                </ng-template>
                            </p-columnFilter>
                        </div>
                    </th>
                    <th>
                        <div class="flex justify-content-center align-items-center">
                            Activity
                            <p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false">
                                <ng-template pTemplate="filter" let-filter="filterCallback">
                                    <p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"></p-slider>
                                    <div class="flex align-items-center justify-content-center px-2">
                                        <span>{{activityValues[0]}}</span>
                                        <span>{{activityValues[1]}}</span>
                                    </div>
                                </ng-template>
                            </p-columnFilter>
                        </div>
                    </th>
                    <th style="width: 8rem">
                        <div class="flex justify-content-center align-items-center">
                            Verified
                            <p-columnFilter type="boolean" field="verified" display="menu"></p-columnFilter>
                        </div>
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer>
                <tr>
                    <td>
                        {{customer.name}}
                    </td>
                    <td>
                        <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
                        <span class="image-text">{{customer.country.name}}</span>
                    </td>
                    <td>
                        <img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
                        <span class="image-text">{{customer.representative.name}}</span>
                    </td>
                    <td>
                        {{customer.date | date: 'MM/dd/yyyy'}}
                    </td>
                    <td>
                        {{customer.balance | currency:'USD':'symbol'}}
                    </td>
                    <td>
                        <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
                    </td>
                    <td>
                        <p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
                    </td>
                    <td class="text-center">
                        <i class="pi" [ngClass]="{'true-icon pi-check-circle': customer.verified, 'false-icon pi-times-circle': !customer.verified}"></i>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
                <tr>
                    <td colspan="7">No customers found.</td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
        <h5>Filter Row</h5>
        <p>Filters are displayed inline within a separate row.</p>
        <p-table #dt2 [value]="customers" dataKey="id"
            [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"
            [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
            [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
            <ng-template pTemplate="caption">
                <div class="flex">
                    <span class="p-input-icon-left ml-auto">
                        <i class="pi pi-search"></i>
                        <input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
                    </span>
                </div>
            </ng-template>
            <ng-template pTemplate="header">
                <tr>
                    <th>Name</th>
                    <th>Country</th>
                    <th>Agent</th>
                    <th>Status</th>
                    <th style="width: 6rem">Verified</th>
                </tr>
                <tr>
                    <th>
                        <p-columnFilter type="text" field="name"></p-columnFilter>
                    </th>
                    <th>
                        <p-columnFilter type="text" field="country.name"></p-columnFilter>
                    </th>
                    <th>
                        <p-columnFilter field="representative" matchMode="in" [showMenu]="false">
                            <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                                <p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name">
                                    <ng-template let-option pTemplate="item">
                                        <div class="p-multiselect-representative-option">
                                            <img [alt]="option.label" src="assets/showcase/images/demo/avatar/{{option.image}}" width="32" style="vertical-align: middle" />
                                            <span class="ml-1">{{option.name}}</span>
                                        </div>
                                    </ng-template>
                                </p-multiSelect>
                            </ng-template>
                        </p-columnFilter>
                    </th>
                    <th>
                        <p-columnFilter field="status" matchMode="equals" [showMenu]="false">
                            <ng-template pTemplate="filter" let-value let-filter="filterCallback">
                                <p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [showClear]="true">
                                    <ng-template let-option pTemplate="item">
                                        <span [class]="'customer-badge status-' + option.value">{{option.label}}</span>
                                    </ng-template>
                                </p-dropdown>
                            </ng-template>
                        </p-columnFilter>
                    </th>
                    <th>
                        <p-columnFilter type="boolean" field="verified"></p-columnFilter>
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-customer>
                <tr>
                    <td>
                        {{customer.name}}
                    </td>
                    <td>
                        <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
                        <span class="image-text">{{customer.country.name}}</span>
                    </td>
                    <td>
                        <img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
                        <span class="image-text">{{customer.representative.name}}</span>
                    </td>
                    <td>
                        <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
                    </td>
                    <td>
                        <i class="pi" [ngClass]="{'true-icon pi-check-circle': customer.verified, 'false-icon pi-times-circle': !customer.verified}"></i>
                    </td>
                </tr>
            </ng-template>
            <ng-template pTemplate="emptymessage">
                <tr>
                    <td colspan="5">No customers found.</td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/tablefilterdemo.ts" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tablefilter-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;h5&gt;Filter Menu&lt;/h5&gt;
    &lt;p&gt;Filters are displayed in an overlay.&lt;/p&gt;
    &lt;p-table #dt1 [value]="customers" dataKey="id"
        [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading" styleClass="p-datatable-gridlines"
        [paginator]="true" currentPageReportTemplate="Showing &#123;first&#125; to &#123;last&#125; of &#123;totalRecords&#125; entries"
        [globalFilterFields]="['name','country.name','representative.name','status']"&gt;
        &lt;ng-template pTemplate="caption"&gt;
            &lt;div class="flex"&gt;
                &lt;button pButton label="Clear" class="p-button-outlined" icon="pi pi-filter-slash" (click)="clear(dt1)"&gt;&lt;/button&gt;
                &lt;span class="p-input-icon-left ml-auto"&gt;
                    &lt;i class="pi pi-search"&gt;&lt;/i&gt;
                    &lt;input pInputText type="text" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" /&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;
                    &lt;div class="flex justify-content-center align-items-center"&gt;
                        Name
                        &lt;p-columnFilter type="text" field="name" display="menu"&gt;&lt;/p-columnFilter&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;div class="flex justify-content-center align-items-center"&gt;
                        Country
                        &lt;p-columnFilter type="text" field="country.name" display="menu"&gt;&lt;/p-columnFilter&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;div class="flex justify-content-center align-items-center"&gt;
                        Agent
                        &lt;p-columnFilter field="representative" matchMode="in" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false"&gt;
                            &lt;ng-template pTemplate="header"&gt;
                                &lt;div class="px-3 pt-3 pb-0"&gt;
                                    &lt;span class="font-bold"&gt;Agent Picker&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/ng-template&gt;
                            &lt;ng-template pTemplate="filter" let-value let-filter="filterCallback"&gt;
                                &lt;p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name"&gt;
                                    &lt;ng-template let-option pTemplate="item"&gt;
                                        &lt;div class="p-multiselect-representative-option"&gt;
                                            &lt;img [alt]="option.label" src="assets/showcase/images/demo/avatar/&#123;&#123;option.image&#125;&#125;" width="32" style="vertical-align: middle" /&gt;
                                            &lt;span class="ml-1"&gt;&#123;&#123;option.name&#125;&#125;&lt;/span&gt;
                                        &lt;/div&gt;
                                    &lt;/ng-template&gt;
                                &lt;/p-multiSelect&gt;
                            &lt;/ng-template&gt;
                        &lt;/p-columnFilter&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;div class="flex justify-content-center align-items-center"&gt;
                        Date
                        &lt;p-columnFilter type="date" field="date" display="menu"&gt;&lt;/p-columnFilter&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;div class="flex justify-content-center align-items-center"&gt;
                        Balance
                        &lt;p-columnFilter type="numeric" field="balance" display="menu" currency="USD"&gt;&lt;/p-columnFilter&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;div class="flex justify-content-center align-items-center"&gt;
                        Status
                        &lt;p-columnFilter field="status" matchMode="equals" display="menu"&gt;
                            &lt;ng-template pTemplate="filter" let-value let-filter="filterCallback"&gt;
                                &lt;p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any"&gt;
                                    &lt;ng-template let-option pTemplate="item"&gt;
                                        &lt;span [class]="'customer-badge status-' + option.value"&gt;&#123;&#123;option.label&#125;&#125;&lt;/span&gt;
                                    &lt;/ng-template&gt;
                                &lt;/p-dropdown&gt;
                            &lt;/ng-template&gt;
                        &lt;/p-columnFilter&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;div class="flex justify-content-center align-items-center"&gt;
                        Activity
                        &lt;p-columnFilter field="activity" matchMode="between" display="menu" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false"&gt;
                            &lt;ng-template pTemplate="filter" let-filter="filterCallback"&gt;
                                &lt;p-slider [ngModel]="activityValues" [range]="true" (onSlideEnd)="filter($event.values)" styleClass="m-3"&gt;&lt;/p-slider&gt;
                                &lt;div class="flex align-items-center justify-content-center px-2"&gt;
                                    &lt;span&gt;&#123;&#123;activityValues[0]&#125;&#125;&lt;/span&gt;
                                    &lt;span&gt;&#123;&#123;activityValues[1]&#125;&#125;&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/ng-template&gt;
                        &lt;/p-columnFilter&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
                &lt;th style="width: 8rem"&gt;
                    &lt;div class="flex justify-content-center align-items-center"&gt;
                        Verified
                        &lt;p-columnFilter type="boolean" field="verified" display="menu"&gt;&lt;/p-columnFilter&gt;
                    &lt;/div&gt;
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-customer&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &#123;&#123;customer.name&#125;&#125;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30"&gt;
                    &lt;span class="image-text"&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/&#123;&#123;customer.representative.image&#125;&#125;" width="32" style="vertical-align: middle" /&gt;
                    &lt;span class="image-text"&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &#123;&#123;customer.date | date: 'MM/dd/yyyy'&#125;&#125;
                &lt;/td&gt;
                &lt;td&gt;
                    &#123;&#123;customer.balance | currency:'USD':'symbol'&#125;&#125;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;span [class]="'customer-badge status-' + customer.status"&gt;&#123;&#123;customer.status&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;p-progressBar [value]="customer.activity" [showValue]="false"&gt;&lt;/p-progressBar&gt;
                &lt;/td&gt;
                &lt;td class="text-center"&gt;
                    &lt;i class="pi" [ngClass]="&#123;'true-icon pi-check-circle': customer.verified, 'false-icon pi-times-circle': !customer.verified&#125;"&gt;&lt;/i&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="emptymessage"&gt;
            &lt;tr&gt;
                &lt;td colspan="7"&gt;No customers found.&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Filter Row&lt;/h5&gt;
    &lt;p&gt;Filters are displayed inline within a separate row.&lt;/p&gt;
    &lt;p-table #dt2 [value]="customers" dataKey="id"
        [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"
        [paginator]="true" currentPageReportTemplate="Showing &#123;first&#125; to &#123;last&#125; of &#123;totalRecords&#125; entries"
        [globalFilterFields]="['name','country.name','representative.name','status']"&gt;
        &lt;ng-template pTemplate="caption"&gt;
            &lt;div class="flex"&gt;
                &lt;span class="p-input-icon-left ml-auto"&gt;
                    &lt;i class="pi pi-search"&gt;&lt;/i&gt;
                    &lt;input pInputText type="text" (input)="dt2.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" /&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Country&lt;/th&gt;
                &lt;th&gt;Agent&lt;/th&gt;
                &lt;th&gt;Status&lt;/th&gt;
                &lt;th style="width: 6rem"&gt;Verified&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;th&gt;
                    &lt;p-columnFilter type="text" field="name"&gt;&lt;/p-columnFilter&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;p-columnFilter type="text" field="country.name"&gt;&lt;/p-columnFilter&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;p-columnFilter field="representative" matchMode="in" [showMenu]="false"&gt;
                        &lt;ng-template pTemplate="filter" let-value let-filter="filterCallback"&gt;
                            &lt;p-multiSelect [ngModel]="value" [options]="representatives" placeholder="Any" (onChange)="filter($event.value)" optionLabel="name"&gt;
                                &lt;ng-template let-option pTemplate="item"&gt;
                                    &lt;div class="p-multiselect-representative-option"&gt;
                                        &lt;img [alt]="option.label" src="assets/showcase/images/demo/avatar/&#123;&#123;option.image&#125;&#125;" width="32" style="vertical-align: middle" /&gt;
                                        &lt;span class="ml-1"&gt;&#123;&#123;option.name&#125;&#125;&lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/ng-template&gt;
                            &lt;/p-multiSelect&gt;
                        &lt;/ng-template&gt;
                    &lt;/p-columnFilter&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;p-columnFilter field="status" matchMode="equals" [showMenu]="false"&gt;
                        &lt;ng-template pTemplate="filter" let-value let-filter="filterCallback"&gt;
                            &lt;p-dropdown [ngModel]="value" [options]="statuses" (onChange)="filter($event.value)" placeholder="Any" [showClear]="true"&gt;
                                &lt;ng-template let-option pTemplate="item"&gt;
                                    &lt;span [class]="'customer-badge status-' + option.value"&gt;&#123;&#123;option.label&#125;&#125;&lt;/span&gt;
                                &lt;/ng-template&gt;
                            &lt;/p-dropdown&gt;
                        &lt;/ng-template&gt;
                    &lt;/p-columnFilter&gt;
                &lt;/th&gt;
                &lt;th&gt;
                    &lt;p-columnFilter type="boolean" field="verified"&gt;&lt;/p-columnFilter&gt;
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-customer&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &#123;&#123;customer.name&#125;&#125;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30"&gt;
                    &lt;span class="image-text"&gt;&#123;&#123;customer.country.name&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/&#123;&#123;customer.representative.image&#125;&#125;" width="32" style="vertical-align: middle" /&gt;
                    &lt;span class="image-text"&gt;&#123;&#123;customer.representative.name&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;span [class]="'customer-badge status-' + customer.status"&gt;&#123;&#123;customer.status&#125;&#125;&lt;/span&gt;
                &lt;/td&gt;
                &lt;td&gt;
                    &lt;i class="pi" [ngClass]="&#123;'true-icon pi-check-circle': customer.verified, 'false-icon pi-times-circle': !customer.verified&#125;"&gt;&lt;/i&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="emptymessage"&gt;
            &lt;tr&gt;
                &lt;td colspan="5"&gt;No customers found.&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
    &lt;/p-table&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123; Component, OnInit &#125; from '@angular/core';
import &#123; Customer, Representative &#125; from '../../domain/customer';
import &#123; CustomerService &#125; from '../../service/customerservice';

@Component(&#123;
    templateUrl: './tablefilterdemo.html',
    styleUrls: ['./tabledemo.scss']
&#125;)
export class TableFilterDemo implements OnInit &#123;

    customers: Customer[];

    representatives: Representative[];

    statuses: any[];

    loading: boolean = true;

    activityValues: number[] = [0, 100];

    constructor(private customerService: CustomerService) &#123; &#125;

    ngOnInit() &#123;
        this.customerService.getCustomersLarge().then(customers => &#123;
            this.customers = customers;
            this.loading = false;

            this.customers.forEach(customer => customer.date = new Date(customer.date));
        &#125;);

        this.representatives = [
            &#123;name: "Amy Elsner", image: 'amyelsner.png'&#125;,
            &#123;name: "Anna Fali", image: 'annafali.png'&#125;,
            &#123;name: "Asiya Javayant", image: 'asiyajavayant.png'&#125;,
            &#123;name: "Bernardo Dominic", image: 'bernardodominic.png'&#125;,
            &#123;name: "Elwin Sharvill", image: 'elwinsharvill.png'&#125;,
            &#123;name: "Ioni Bowcher", image: 'ionibowcher.png'&#125;,
            &#123;name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'&#125;,
            &#123;name: "Onyama Limba", image: 'onyamalimba.png'&#125;,
            &#123;name: "Stephen Shaw", image: 'stephenshaw.png'&#125;,
            &#123;name: "Xuxue Feng", image: 'xuxuefeng.png'&#125;
        ];

        this.statuses = [
            &#123;label: 'Unqualified', value: 'unqualified'&#125;,
            &#123;label: 'Qualified', value: 'qualified'&#125;,
            &#123;label: 'New', value: 'new'&#125;,
            &#123;label: 'Negotiation', value: 'negotiation'&#125;,
            &#123;label: 'Renewal', value: 'renewal'&#125;,
            &#123;label: 'Proposal', value: 'proposal'&#125;
        ]
    &#125;

    clear(table: Table) &#123;
        table.clear();
    &#125;

&#125;
</app-code>
        </p-tabPanel>

        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-tablefilter-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
